<template>
	<div class="item" @click="goDetail">
		<div class="top">
			<div class="left">
				<image :src="solution.coverImageUrl" alt="" />
			</div>
			<div class="middle">
				<div class="title">{{ solution.solutionName }}</div>
				<div class="keywordBox">
					<div class="keyword" v-for="(item, index) in keywordlist" :class="{ last: index === 3 }">
						{{ index == 3 ? '更多' : item.length > 4 ? item.slice(0, 4) + '…' : item }}
					</div>
					<div class="box"></div>
				</div>
			</div>
			<div class="right"><uni-icons type="star-filled" size="30" class="start" @click="collection" :color="favorite ? '#FF4D4D' : '#D3D3D3'"></uni-icons></div>
		</div>
		<div class="bottom">{{ solution.summary }}</div>
	</div>
</template>

<script>
import { favoriteSolution } from '@/api/favorite/favorite.js';
export default {
	data() {
		return {
			keywordlist: []
		};
	},
	computed: {
		favorite() {
			return this.solution.favorite;
		}
	},
	props: {
		solution: {
			typeof: Object,
			default: {}
		}
	},
	created() {
		const categories = this.solution.categories;
		if (categories.length > 3) {
			categories.slice(0, 3);
		}
		this.keywordlist = categories.map((item) => {
			return item.categoryName;
		});
	},
	methods: {
		async collection() {
			try {
				// 发起收藏请求
				await favoriteSolution(this.solution.id, !this.favorite);
				// 触发事件修改颜色
				this.$emit('setFavorite', !this.favorite, this.solution.id);
			} catch {
				console.log('报错');
			}
		},
		goDetail(){
			console.log("方案详情")
			uni.navigateTo({
			  url: `/pages/common/solutionDetail/index?id=${this.solution.id}`
			})
		}
	}
};
</script>

<style lang="less" scoped>
.item {
	margin: 10rpx;
	padding: 10rpx;
	height: 280rpx;
	background-color: #fff;
	border-radius: 20rpx;
	.top {
		display: flex;
		height: 150rpx;
		.left {
			height: 150rpx;
			width: 200rpx;
			padding: 0 25rpx;
			image {
				height: 150rpx;
				width: 150rpx;
				object-fit: cover;
			}
		}
		.middle {
			flex: 1;
			overflow: hidden;
			.title {
				line-height: 80rpx;
				font-weight: 500;
				height: 80rpx;
			}
			.keywordBox {
				height: 70rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.keyword {
					font-size: 24rpx;
					padding: 0 7rpx;
					margin-right: 5px;
					border: 1px solid skyblue;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 30rpx;
					white-space: nowrap; /* 防止文本换行 */
					overflow: hidden; /* 隐藏超出部分 */
				}
				.last {
					width: 90rpx;
				}
				.box {
					height: 70rpx;
					flex: 1;
				}
			}
		}
		.right {
			padding: 20rpx 10rpx;
			width: 80rpx;
		}
	}
	.bottom {
		height: 50px;
		line-height: 25px; // 设置行高为25px，以确保两行文本的高度为50px
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; // 限制为两行
		text-overflow: ellipsis;
		word-break: break-all; // 确保长单词能够换行
		padding: 0 5px; // 可选：增加一些内边距以便更好地查看文本
		text-indent: 1em;
	}
}
</style>
